<template>
  <div class="allListContainer">
   <div class="allList">
    <van-list
       v-model:loading="loading"
       :finished="finished"
       @load="onLoad"
       :offset="100"
       :immediate-check="false"
    >
      <div class="allListItem" v-for="(item,index) in ItemList.List">
        <img :src="item.coverImgUrl" :alt="item.name">
         <div class="name">{{item.name}}</div>
          <div class="count">
            <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-a4gl-play123"></use>
           </svg>
         </div>
      </div>
    </van-list>
   </div>
  </div>
</template>

<script>
import {getGoodsPlayList} from '@/api/index.js'
import {reactive,onMounted,ref} from 'vue'
export default {
 props:['identification'],
 setup(props){
   //变量
   const loading = ref(false);
   const finished = ref(false);
   const ItemList=reactive({
     List:[],
     total:0, //歌单总数量
     i:30
   })
   //方法
   async function onLoad(){
     ItemList.i+=6
     console.log(ItemList.i+=6,'123');
     // 加载状态结束
     if(ItemList.i>=ItemList.total){
       finished.value = true;
       loading.value = true;
     }else{
      const {data:res}=await getGoodsPlayList(props.identification,ItemList.i+=6)
      let otherPlayList=res.playlists.slice(ItemList.List.length,res.playlists.length)
      ItemList.List.push(...otherPlayList)
      setTimeout(()=>{
        loading.value = false;
      },1000)    
     }
   }
   onMounted(async ()=>{
     const {data:res}=await getGoodsPlayList(props.identification,30)
     ItemList.List=res.playlists
     ItemList.total=res.total
   })
   return{
     ItemList,
     loading,
     finished,
     onLoad
   }
 }
}
</script>

<style lang="less" scoped>
.allList{
    width: 100%;
    height: 100%;
    padding-top:0.5rem;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    padding:0 0.2rem;
    text-align:center;
}
  /deep/.van-list__placeholder{
    width: 1.7rem;
  }
.allListContainer{
  position: relative;
  width: 7.1rem;
  height: 100vh;
   .van-list:extend(.allList){
     /deep/ .van-loading{
       display: block;
       margin-left:2.2rem
     }
    .allListItem{
    width: 30%;
    height: 2.8rem;
    position: relative;
    margin-bottom:0.2rem;
   img{
      width: 100%;
      height: 2rem;
      border-radius: 0.3rem;
    }
    .name{
      height: 0.8rem;
      width: 100%;
      font-size:0.24rem;
      line-height: 0.4rem;
      position: absolute;
      bottom:-0.1rem;
      color:black;
      text-align: left;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .count{
      position: absolute;
      right:0.1rem;
      top:0.1rem;
      font-size:0.24rem;
      color:#ccc;
      display: flex;
      align-items: center;  
      .icon{
        fill: #ccc;
      }
    }  
  }
   }
}
.afterAdd{
  height: 0;
  padding:0;
  margin:0;
}
</style>